<template>
  <div class="app-container">
    <el-row :gutter="10" class="mb8">
      <el-col :span="1.5">
        <el-button type="primary" plain size="mini" @click="handleClick('ALL')"
          :class="{'btn-pitch-on':queryParams.workOrderStatus=='ALL'?true:false}">
          全部
        </el-button>
      </el-col>
      <el-col :span="1.5" v-for="item in dict.work_order_status">
        <el-button type="primary" plain size="mini" @click="handleClick(item.dictValue)"
          :class="{'btn-pitch-on':queryParams.workOrderStatus==item.dictValue?true:false}">
          {{item.dictLabel}}
        </el-button>
      </el-col>
    </el-row>

    <el-row :gutter="10">
      <el-col :span="20">
        <el-card shadow="never" style="margin-right: 5px;">
          <work-order-list ref="workOrderListRef" />
        </el-card>
      </el-col>
      <el-col :span="4">
        <el-card shadow="never">
          <div class="sidemenu">
            <el-collapse v-model="activeNames">
              <el-collapse-item title="工单类型" name="1">
                <select-box v-model="queryParams.workOrderType" @change="handleQuery" :datavalue="workOrderTypeOptions">
                </select-box>
              </el-collapse-item>
            </el-collapse>
          </div>
        </el-card>
      </el-col>
    </el-row>
  </div>
</template>

<script>
  import WorkOrderList from "./workOrderList"
  import SelectBox from "@/components/custom/selectbox"
  import {
    listWorkOrderType
  } from "@/api/workorder/workOrderType";
  import {
    listWorkOrder
  } from "@/api/workorder/workOrder";

  export default {
    name: "WorkOrderMain",
    components: {
      SelectBox,
      WorkOrderList
    },
    dicts: ['work_order_status'],
    data() {
      return {
        queryParams: {
          workOrderType: 'ALL',
          workOrderStatus: 'ALL'
        },
        workOrderTypeOptions: [],
        activeNames: ['1'],
      };
    },
    created() {

    },
    mounted() {
      let getTime = this.$route.query.time;
      if (getTime!=undefined && getTime != null && getTime == "no") {
        this.queryParams.time = this.parseTime(new Date(), '{y}-{m}-{d}');
      }
      let type = this.$route.query.id
      if (type != undefined && type != null) {
        this.queryParams.workOrderType = type
      }
      this.getListWorkOrderType()
    },
    methods: {
      getListWorkOrderType() {
        // listWorkOrder().then(res => {
        //   this.workOrderTypeOptions.push({
        //     label: '全部',
        //     code: 'ALL',
        //     num: res.total
        //   })
        // })
        listWorkOrderType().then(res => {
          console.log("res", res)
          var sum = 0;
          res.rows.reduce(function(pre, curr) {
            sum = pre.num + curr.num;
            return sum;
          });
          this.workOrderTypeOptions.push({
            label: '全部',
            code: 'ALL',
            num: sum
          })

          for (let i in res.rows) {
            let row = res.rows[i]
            this.workOrderTypeOptions.push({
              label: row.typeName,
              code: row.id,
              num: row.num
            })
          }
        })
        // this.workOrderTypeOptions.sort(function(a, b) {
        //   return a.num > b.num ? -1 : ((a.num = b.num) ? 0 : 1);
        // });
      },

      handleQuery() {
        let params = {
          status: this.queryParams.workOrderStatus == 'ALL' ? '' : this.queryParams.workOrderStatus,
          orderType: this.queryParams.workOrderType == 'ALL' ? '' : this.queryParams.workOrderType
        }
        this.$refs.workOrderListRef.handleQuery(params)
      },
      handleClick(v) {
        this.queryParams.workOrderStatus = v
        this.handleQuery()
      },
    }
  };
</script>
<style lang="scss" scoped>
  .sidemenu {
    background-color: #fff;
  }

  .btn-pitch-on {
    background-color: #1890ff;
    color: #FFFFFF;
  }
</style>
